@(geneIds: Option[String])(implicit request: RequestHeader)
@user.main("热图")("heatmap") {
	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa-snowflake-o"></i>
					<a href="#">热图</a>
				</li>
			</ul>
		</div>


		<div class="row-fluid">

			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								设置参数
							</div>
						</div>

						<div class="portlet-body">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post">

								<div id="hand">
									<div class="form-group">
										<label class="control-label col-sm-2">样品:</label>
										<div class="col-sm-6" >
											<div class='checkbox' id='sampleName'></div>
										</div>
									</div>


									<div class="form-group">
										<div class="actions col-sm-offset-2 col-sm-1">
											<button type="button" class="btn btn-default" id="search" onclick="selectAll()">
												全选</button>
										</div>
										<div class="actions col-sm-3">
											<button type="button" class="btn btn-default" id="search" onclick="reverseSelect()">
												反选</button>
										</div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">代谢物名称:</label>
									<div class="col-sm-6">
										@if(geneIds.isDefined) {
											<textarea name="geneIdStr" id="geneIdStr" class="form-control" rows="10">@geneIds.get</textarea>
										} else {
											<textarea name="geneIdStr" id="geneIdStr" class="form-control" rows="10"></textarea>
										}
										<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGene">
											example</em></a></span>
									</div>
								</div>

								<div class="form-group" id="paired">
									<label class="control-label col-sm-2">数据变换方法<span id="question5" style="margin-bottom: 5px">
										<a type="button" title="说明" data-container="body" data-toggle="popover"
										data-placement="right" data-content="预处理后的数据经过变换后，进行热图的计算和绘制。"
										data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
									</span>:</label>
									<div class="col-sm-4">
										<select class="form-control" name="method" required="required" style="border-radius: 4px;">
											<option value="none">None</option>
											<option value="log2" selected="selected">log2_transform:
												log2(value+1)</option>
											<option value="log2_center">log2_transform_row_median_center:
												scale(log2(value+1))</option>
											<option value="center">row_median_center: scale(value)</option>
										</select>
									</div>
								</div>

								<div class="form-group" id="paired">
									<label class="control-label col-sm-2">行（代谢物）距离计算方法:</label>
									<div class="col-sm-4">
										<select class="form-control" name="rowDist" required="required" onchange="change()" id="distanceMethod">
											<option value="euclidean" selected>euclidean</option>
											<option value="canberra">canberra</option>
											<option value="minkowski">minkowski</option>
											<option value="correlation">correlation</option>
										</select>
									</div>
								</div>

								<div class="form-group" id="paired">
									<label class="control-label col-sm-2">列（样品）距离计算方法:</label>
									<div class="col-sm-4">
										<select class="form-control" name="colDist" required="required" onchange="change()" id="distanceMethod">
											<option value="euclidean" selected>euclidean</option>
											<option value="canberra">canberra</option>
											<option value="minkowski">minkowski</option>
											<option value="correlation">correlation</option>
										</select>
									</div>
								</div>

								<div class="form-group" id="paired">
									<label class="control-label col-sm-2">行（代谢物）聚类方法:</label>
									<div class="col-sm-4">
										<select class="form-control" name="rowCluster" required="required" style="border-radius: 4px;">
											<option value="single">single</option>
											<option value="complete" selected="selected">complete</option>
											<option value="average">average</option>
											<option value="weighted">weighted</option>
											<option value="centroid">centroid</option>
											<option value="median">median</option>
											<option value="ward">ward</option>
										</select>
									</div>
								</div>

								<div class="form-group" id="paired">
									<label class="control-label col-sm-2">列（样品）聚类方法:</label>
									<div class="col-sm-4">
										<select class="form-control" name="colCluster" required="required" style="border-radius: 4px;">
											<option value="single">single</option>
											<option value="complete" selected="selected">complete</option>
											<option value="average">average</option>
											<option value="weighted">weighted</option>
											<option value="centroid">centroid</option>
											<option value="median">median</option>
											<option value="ward">ward</option>
										</select>
									</div>
								</div>

								<div class="form-group">
									<div class="actions col-sm-offset-2 col-sm-2">
										<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
											运行</button>
									</div>
								</div>


							</form>

						</div>
					</div>
				</div>
			</div>

			<div id="result" style="display: none">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet green-jungle box">
						<div class="portlet-title">
							<div class="caption">
								热图
							</div>
							<div class="tools">
								<a href="javascript:;" class="collapse">
								</a>
							</div>
						</div>

						<div class="portlet-body">
							<div id="charts" align="center">没有图片结果生成！</div>
						</div>
					</div>
				</div>
			</div>
			</div>


		</div>

	</div>


	<script>
			var originalHtml = ""
			$(function () {

				$('#egGene').click(function () {
					$.ajax({
						url: "@routes.MetaboliteController.getFirst10GeneIdByLf()",
						type: "get",
						success: function (data) {
							$('#geneIdStr').val(data);
							$("#form").bootstrapValidator("revalidateField", "geneIdStr")
							return false
						}
					})
				});

				$.ajax({
					url: "@routes.MetaboliteController.getGeneIds()",

					type: "get",
					success: function (data) {
						$('#geneIdStr').typeahead({
							source: data.geneIds,
							updater: function (item) {
								return this.$element.val().replace(matcherRegex, '') + item + matcherEnd;
							},
							matcher: function (item) {
								var tquery = extractor(this.query);
								if (!tquery) return false;
								return ~item.toLowerCase().indexOf(tquery.toLowerCase())
							},
							highlighter: function (item) {
								var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
								return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
									return '<strong>' + match + '</strong>'
								})
							}
						})
					}
				})


				originalHtml = $("#tableContent").html()

				$.ajax({
					url: "@routes.MetaboliteController.getSampleNames()",
					async:false,
					type: "get",
					success: function (data) {
						$("#sampleName").empty()
						$.each(data.sampleNames, function (i, v) {
							var html = "<label style='margin-right: 15px;width: 100px;padding-top: 7px;'>" +
									"<input type='checkbox'  name='sampleNames[]'  value='" + v + "'>" + v +
									"</label>"
							$("#sampleName").append(html);
						})
					}
				})

				bootstrapValidator()
			})

			function selectAll() {
				$(":checkbox").prop("checked", true)
				$("#form").bootstrapValidator("revalidateField", "sampleNames[]")
			}

			function reverseSelect() {
				$(":checkbox").each(function () {
					$(this).prop("checked", !$(this).prop("checked"));
				});
				$("#form").bootstrapValidator("revalidateField", "sampleNames[]")

			}

			function mySearch() {
				var form = $("#form")
				var fv = form.data("bootstrapValidator")
				fv.validate()
				if (fv.isValid()) {
					var element = "<div id='content'><span id='info'>"+zhRunning+"</span>&nbsp;<img class='runningImage' src='@routes.Assets.at("images/running2.gif")' style='width: 30px;height: 20px;'></div>"
					var index = layer.alert(element, {
						skin: 'layui-layer-molv'
						, closeBtn: 0,
						title: zhInfo,
						btn: []
					});

					$.ajax({
						url: "@routes.MetaboliteController.heatmap()",
						type: "post",
						data: $("#form").serialize(),

						success: function (data) {
							layer.close(index)
							if (data.valid == "false") {
								$("#charts").html("没有图片结果生成！")
								swal("Error", data.message, "error")
								$("#result").hide()
							} else {
								$("#charts").html(data.div)
								$("#result").show()
							}
						}
					});
				}

			}

			function bootstrapValidator() {
				var infinityNumber = Number.MAX_VALUE
				$('#form').bootstrapValidator({
					framework: 'bootstrap',
					icon: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
						'sampleNames[]': {
							validators: {
								choice: {
									min: 2,
									message: '样品数量必须大于2！'
								}
							}
						},
						geneIdStr: {
							validators: {
								notEmpty: {
									message: '代谢物名称不能为空！'
								},
							}
						},

					}
				});
			}

	</script>

}